[CSS] 테두리 및 외곽선을 둥글게 표현하기, border-radius

CSS를 사용해 박스 형태의 인터페이스 테두리(외곽선)를 부드럽게 만들기 위해서 어떻게 해야할까요?

# 테두리 외곽선 둥글게 만들기, border-radius

과거에는 브라우저의 호환성을 위해 대부분 백그라운드 이미지를 활용하는 방법을 많이 사용했습니다. 하지만 최근에는 대부분의 브라우저가 둥글게 보이도록 만드는 border-radius 속성을 대부분 지원하기 때문에 어렵게 이미지 작업을 하지 않아도 css만으로 간단하게 사용 가능합니다.

참고로 테두리를 만드는 스타일인 속성 border가 없더라도 둥글게 표현되니 참고하세요. 아래는 간단한 문법, 사용 방법입니다.

border-radius: value

위의 방법으로 값을 지정할때는 얼마만큼 둥글게 표현할 것인지를 결정할 수 있습니다. 값은 아래와 같이 픽셀 또는 퍼센트를 입력하여 사용합니다.

위처럼 픽셀(px) 단위를 사용하기도 하지만 %를 사용하여 상대적인 수치 만큼 지정할 수도 있습니다.

! 픽셀과 퍼센트 값의 차이점은?

퍼센트를 사용한 방법의 경우 픽셀을 사용한 방법과 동일하지 않습니다. 이 둘은 차이점이 있는데 그 차이점은 % 단위 사용시 사각형의 가로 길이에 대하여도 비율만큼의 크기가 둥글게 외곽선이 표현된다는 점입니다.

일반적인 픽셀 사용시에는 둥글게 표현되는 크기가 가로와 세로 동일한 값으로 적용됩니다. 그럼 아래부터는 다양한 예제를 보면서 자세히 알아보겠습니다.

# border-radius 속성 예제소스 보기

아래는 네모난 영역에 속성을 적용하여 테두리를 둥글게 만들어 본 코드입니다. 아래를 확인하세요.

! 픽셀값을 사용한 예제보기

먼저 아래는 픽셀을 값으로 사용한 경우 어떻게 나타나는지 확인해보세요.
@ border.html

@ border.css
이 코드를 실행할 경우 나타나는 모습은 다음과 같습니다.


보시는 것과 같이 우리가 원하는 둥근 테두리가 만들어졌습니다.

! 퍼센트 값을 사용한 예제보기

만약 픽셀단위가 아닌 퍼센트(%)인 경우 어떻게 될까요? 아래에서 확인해 보세요.
@ border.html

@ border.css
위 코드를 실행하면 아래와 같이 나타나게됩니다.


퍼센트값을 적용하면 항상 같은 정도로 표현되지 않으며 적용대상의 width 및 height값에 따라 굴곡이 다르게 적용됩니다.

# 테두리의 원하는 모서리만 선택 적용하기

위 예제들은 모든 테두리에 동일한 둥근 스타일이 적용되었습니다. 만약 모서리마다 각각 다른 스타일을 적용하려면 어떻게할까요?위 코드는 아래와 같이 나타나게됩니다.

! 한줄에 각각 테두리 적용하는 방법

위와 같이 위치값에 따른 다른 속성을 사용할 수 있지만 아래처럼 한줄에 사용하는 방법이 코드가 간결합니다. 시작지점부터 상좌, 상우, 하좌, 하우 방향입니다.

실행하면 아래처럼 적용되어 나타납니다.

# 마치면서

여기까지 다양한 방법의 border-radius 사용예제를 알아보았습니다. 이처럼 이미지 사용없이 편리하게 테두리를 둥글게 표현해주는 속성이지만 오래된 브라우저의 경우 .. 예를들어 border-radius는 익스플로러(IE) 8 이하에서는 구현되지 않기때문에 다른 방법(역시 이미지)이 필요합니다.